import { createApp } from 'vue';
import App from './pages/App.vue';
import 'element-plus/dist/index.css'; // 导入 Element Plus 样式
import ElementPlus from 'element-plus' //使用element-plus组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//导入element-plus图标
import zhCn from 'element-plus/es/locale/lang/zh-cn'  // 导入element-plus组件中文语言包
import { createPinia } from 'pinia';//使用pinia
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'//使用pinia持久存储
import router from './router'; // 导入路由
import { createI18n } from 'vue-i18n';//使用多语言
import messages from './lang'; // 引入语言文件

//消息通知类
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus';

// 按需引入 vxe-table等组件
import {VxeUI,VxeTooltip,VxeLoading} from 'vxe-pc-ui'
import {VxeTable,VxeColumn,VxeColgroup,VxeGrid,VxeToolbar} from 'vxe-table'
// 导入vxe主题变量，也可以重写主题变量
import 'vxe-table/styles/cssvar.scss'
import 'vxe-pc-ui/styles/cssvar.scss'
// 导入vxe默认的语言
import zhCN from 'vxe-pc-ui/lib/language/zh-CN'
VxeUI.setI18n('zh-CN', zhCN)
VxeUI.setLanguage('zh-CN')
//加载vxe-table组件
function lazyVxeTable (app) {
  app.use(VxeTable)
  app.use(VxeColumn)
  app.use(VxeColgroup)
  app.use(VxeGrid)
  app.use(VxeToolbar)
}
//加载vxe等其它组件
function lazyVxeUI (app) {
  app.use(VxeTooltip),
  app.use(VxeLoading)
}

//注册pinia
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)// 使用pinia持久存储插件

// elment plus组件设置语言和消息
const i18n = createI18n({
    locale: localStorage.getItem('locale')||'zh', // 默认语言
    messages,
    missing(locale, key) {
      console.warn(`[i18n] Not found '${key}' key in '${locale}' locale messages.`);
      return key; // 没有找到对应翻译时就返回原来的，处理自定义配置字段问题
    }
  });

const app = createApp(App);
app.use(pinia)// 使用路由
app.use(router); // 使用路由
app.use(i18n);// 使用语言
app.use(ElementPlus, {//使用ElementPlus
  locale: zhCn  // 设置 Element Plus 的语言为中文
},
// 注册 vxe-table等组件
app.use(lazyVxeUI),
app.use(lazyVxeTable))

// 全局注册 Element Plus 图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
 }

// 添加 ElMessage ElNotification 到全局属性
app.config.globalProperties.$ElMessage = ElMessage;
app.config.globalProperties.$ElNotification = ElNotification;
app.mount('#app');
